<template>
	<view class="content">
		<template>
			<view>
				<canvas style="width: 500rpx;height: 500rpx;" canvas-id="myCanvas" id="myCanvas"></canvas>
				<!-- 
		        <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		        <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
		        <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas> -->
			</view>
			<button type="default" @click="btn">下载</button>
		</template>
	</view>
</template>

<script>
	export default {
		onReady: function(e) {
			//     var context = uni.createCanvasContext('firstCanvas')
			// console.log(context);
			//     context.setStrokeStyle("#00ff00")
			//     context.setLineWidth(5)
			//     context.rect(0, 0, 200, 200)
			//     context.stroke()
			//     context.setStrokeStyle("#ff0000")
			//     context.setLineWidth(2)
			//     context.moveTo(160, 100)
			//     context.arc(100, 100, 60, 0, 2 * Math.PI, true)
			//     context.moveTo(140, 100)
			//     context.arc(100, 100, 40, 0, Math.PI, false)
			//     context.moveTo(85, 80)
			//     context.arc(80, 80, 5, 0, 2 * Math.PI, true)
			//     context.moveTo(125, 80)
			//     context.arc(120, 80, 5, 0, 2 * Math.PI, true)
			//     context.stroke()
			//     context.draw()
			const ctx = uni.createCanvasContext('myCanvas')
			ctx.setFillStyle('#FFFFFF')
			ctx.fillRect(0, 0, 500, 500)
			// ctx.setFillStyle('red')

			ctx.setFillStyle('black')
			// ctx.fillRect(10, 10, 150, 75)
			ctx.setFontSize(16)
			ctx.fillText('我呜呜呜', 20, 20)
			ctx.setFontSize(16)
			ctx.fillText('爱嗯嗯嗯', 20, 40)
			ctx.setFontSize(16)
			ctx.fillText('你哈哈哈', 20, 60)

			ctx.draw()
		},
		methods: {
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			btn() {
				uni.canvasToTempFilePath({
					// x: 100,
					// y: 200,
					// width: 50,
					// height: 50,
					// destWidth: 100,
					// destHeight: 100,
					fileType: 'jpg',
					canvasId: 'myCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('save success');
							}
						});
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
